<template>
    <div class="p-2">
        <transition :enter-active-class="proxy?.animate.searchAnimate.enter"
            :leave-active-class="proxy?.animate.searchAnimate.leave">
            <searchrevealing>
                <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="68px">
                    <el-form-item label="菜单名称" prop="columnName">
                        <el-input v-model="queryParams.columnName" placeholder="请输入菜单名称" clearable style="width: 240px"
                            @keyup.enter="getList" />
                    </el-form-item>
                    <el-form-item label="是否默认" prop="isDefault">
                        <el-select v-model="queryParams.isDefault" placeholder="是否默认" clearable style="width: 240px">
                            <el-option v-for="dict in isDefaultList" :key="dict.value" :label="dict.label"
                                :value="dict.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="Search" @click="getList">搜索</el-button>
                        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-form>
            </searchrevealing>
        </transition>
        <el-card shadow="hover">
            <template #header>
                <el-row :gutter="10">
                    <el-col :span="1.5">
                        <el-button type="primary" plain icon="Plus" @click="handleAdd()">新增
                        </el-button>
                    </el-col>
                    <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
                </el-row>
            </template>

            <el-table v-loading="loading" :data="menuList">
                <el-table-column prop="columnName" label="菜单名称" :show-overflow-tooltip="true"
                    align="center"></el-table-column>
                <el-table-column prop="isDefault" label="是否默认" :show-overflow-tooltip="true" align="center">
                    <template #default="scope">
                        <span>{{ scope.row.isDefault ? '是' : '否' }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="columnPageSize" label="每页条数" :show-overflow-tooltip="true"
                    align="center"></el-table-column>
                <el-table-column fixed="right" label="操作" width="180">
                    <template #default="scope">
                        <el-tooltip content="修改" placement="top">
                            <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" />
                        </el-tooltip>
                        <el-tooltip content="删除" placement="top">
                            <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" />
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <el-drawer :title="dialog.title" v-model="dialog.visible" destroy-on-close append-to-bod>
            <el-form ref="formRef" :model="dynamicValidateForm" :rules="rules" label-width="100px">
                <el-row>
                    <el-col :span="18">
                        <el-form-item label="菜单名称" prop="columnName">
                            <el-input v-model="dynamicValidateForm.columnName" placeholder="请输入菜单名称" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="18">
                        <el-form-item label="每页条数" prop="columnPageSize">
                            <el-input v-model="dynamicValidateForm.columnPageSize" placeholder="请输入每页条数" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="18">
                        <el-form-item label="是否默认" prop="isDefault">
                            <el-switch v-model="dynamicValidateForm.isDefault" active-value="1" inactive-value="0" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <div class="hm-form-title">列设置</div>
                <div v-for="(domain, index) in dynamicValidateForm.columnCustom" :key="domain.key" class="flex">
                    <div class="index">第{{ index + 1 }}列</div>
                    <div class="rows">
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="列名称" :prop="'columnCustom.' + index + '.label'" :rules="{
                                    required: true,
                                    message: '请输入名称',
                                    trigger: 'blur',
                                }">
                                    <el-input v-model="domain.label" />

                                </el-form-item>
                            </el-col>
                            <el-col :span="5">
                                <el-form-item label="显示隐藏" :prop="'columnCustom.' + index + '.visible'">
                                    <el-switch v-model="domain.visible" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="5">
                                <el-form-item label="固定" :prop="'columnCustom.' + index + '.fixed'">
                                    <el-switch v-model="domain.fixed" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="对应字段" :prop="'columnCustom.' + index + '.prop'" :rules="{
                                    required: true,
                                    message: '请输入对应字段',
                                    trigger: 'blur',
                                }">
                                    <el-input v-model="domain.prop" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-image class="delete" :src="icon_shanchu" @click.prevent="removeDomain(domain)">
                        </el-image>
                        <el-button type="primary" class="add" :icon="Plus" @click="insertDomain(domain)"></el-button>
                    </div>
                </div>
                <div class="add_mechanism_div">
                    <el-button type="primary" :icon="Plus" @click="addDomain" class="add_mechanism">新增</el-button>
                </div>
            </el-form>
            <template #footer>
                <div style="flex: auto">
                    <el-button type="primary" @click="submitForm(formRef)">提交</el-button>
                </div>
            </template>
        </el-drawer>
    </div>
</template>

<script setup name="Column" lang="ts">
import { Plus } from '@element-plus/icons-vue'
import { type FormInstance } from 'element-plus'
import icon_shanchu from '@/assets/images/icon_shanchu.png'
import { addColumn, listColumn, getColumn, removeColumn, updateColumn } from '@/api/system/column/index'
const { proxy } = getCurrentInstance() as ComponentInternalInstance
const loading = ref(false)
const showSearch = ref(true)
const menuList = ref<[]>([])
const formRef = ref<FormInstance>()
const queryParams = ref({
    columnName: '',
    isDefault: ''
})
const isDefaultList = ref([
    { label: '是', value: '1' },
    { label: '否', value: '0' },
])
const dialog = reactive<DialogOption>({
    visible: false,
    title: ''
});
interface DomainItem {
    key: number
    label: string
    visible: boolean;
    fixed: boolean;
    prop: string;
}
const dynamicValidateForm = ref<{
    columnCustom: DomainItem[],
    columnName: string,
    isDefault: string,
    columnPageSize: string,
    columnId?: string;
}>({
    columnCustom: [
        {
            key: Date.now(),
            label: '',
            visible: true,
            fixed: false,
            prop: '',
        },
    ],
    columnName: '',
    isDefault: '0',
    columnPageSize: '10'
})
const rules = ref(
    {
        columnName: [{ required: true, message: "菜单名称不能为空", trigger: "blur" }],
    },

)
/** 筛选重置 */
const resetQuery = () => {
    queryParams.value = {
        columnName: '',
        isDefault: ''
    }
    getList()
}
/** 查询菜单列表 */
const getList = async () => {
    const res = await listColumn({ ...queryParams.value })
    menuList.value = res.data
}
/** 新增按钮操作 */
const handleAdd = (row?: any) => {
    dialog.visible = true;
    dialog.title = "添加";
}
/** 修改按钮操作 */
const handleUpdate = async (row?: any) => {
    reset()
    if (row.columnId) {
        const { data } = await getColumn(row.columnId);
        data.columnCustom = JSON.parse(data.columnCustom)
        data.isDefault = data.isDefault.toString()
        dynamicValidateForm.value = data;
    }
    dialog.visible = true;
    dialog.title = "修改";
}
/** 删除按钮操作 */
const handleDelete = async (row: any) => {
    await proxy?.$modal.confirm('是否确认删除名称为"' + row.columnName + '"的数据项?');
    await removeColumn(row.columnId);
    await getList();
    proxy?.$modal.msgSuccess("删除成功");
}
/** 新增列 */
const addDomain = () => {
    dynamicValidateForm.value.columnCustom.push({
        key: Date.now(),
        label: '',
        visible: true,
        fixed: false,
        prop: ''
    })
}
/** 删除列 */
const removeDomain = (item: DomainItem) => {
    const index = dynamicValidateForm.value.columnCustom.indexOf(item)
    if (index !== -1) {
        dynamicValidateForm.value.columnCustom.splice(index, 1)
    }
}
/** 中间添加列 */
const insertDomain = (item: DomainItem) => {
    const index = dynamicValidateForm.value.columnCustom.indexOf(item)
    dynamicValidateForm.value.columnCustom.splice(index + 1, 0, {
        key: Date.now(),
        label: '',
        visible: true,
        fixed: false,
        prop: ''
    })
}
/** 重置 */
const reset = () => {
    dynamicValidateForm.value = {
        columnCustom: [
            {
                key: Date.now(),
                label: '',
                visible: true,
                fixed: false,
                prop: '',
            },
        ],
        columnName: '',
        isDefault: '0',
        columnPageSize: '10'
    }
    formRef.value?.resetFields();
}
/** 提交 */
const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate(async (valid) => {
        if (valid) {
            // 修改
            if (dynamicValidateForm.value.columnId) {
                await updateColumn({ ...dynamicValidateForm.value, columnCustom: JSON.stringify(dynamicValidateForm.value.columnCustom) })
            } else {
                await addColumn({ ...dynamicValidateForm.value, columnCustom: JSON.stringify(dynamicValidateForm.value.columnCustom) })
            }
            proxy?.$modal.msgSuccess("操作成功");
            dialog.visible = false;
            reset()
            await getList();
        } else {
            console.log('error submit!')
        }
    })
}
onMounted(() => {
    getList();
})
</script>
<style lang="scss" scoped>
:deep(.el-drawer) {
    width: 1000px !important;
}



.delete {
    width: 20px;
    height: 20px;
    position: absolute;
    right: 10%;
    top: 36px;
    cursor: pointer;
}

.add {
    width: 20px;
    height: 20px;
    position: absolute;
    right: 5%;
    top: 36px;
    cursor: pointer;
}

.flex {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .index {
        width: 80px;
    }

    .rows {
        position: relative;
        width: calc(100% - 80px);
    }
}

.add_mechanism_div {
    width: 100%;
    display: flex;
    justify-content: center;

    .add_mechanism {
        width: 275px;
        height: 38px;
        font-size: 16px;

    }
}
</style>